<template>
  <div>

    <el-card class="box-card">
      <div>
        <el-button @click="addDialog" type="primary" plain icon="el-icon-document-add">新增</el-button>
      </div>

      <el-table row-key="date" :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="phone" label="手机号" :formatter="formatter"></el-table-column>
        <el-table-column prop="forbidden" label="禁用">
          <template #default="{ row }">
            <el-switch v-model="row.forbidden" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" align="center">
          <template #default="{ row }">
            <el-tag :type="row.role === '管理员' ? 'primary' : 'success'">{{ row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="{ $index, row }">
            <el-button type="success" icon="el-icon-edit" plain @click="editRow($index)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" plain @click="deleteRow($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!-- <user-form :dialog-visible.sync="dialogVisible" :form-data="formData" @update:dialog-visible="dialogVisible = $event"
      @save="handleSave" /> -->
    <user-form :model-value="dialogVisible" @update:model-value="dialogVisible = $event" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import UserForm from './components/UserForm.vue';

const tableData = ref([
  {
    date: "2016-05-02",
    name: "李东生",
    phone: "13523111543",
    role: "普通用户",
    birthday: "1992-01-12",
    gender: "男",
    forbidden: false,
  },
  {
    date: "2016-05-04",
    name: "赵萍萍",
    phone: "13523111543",
    role: "普通用户",
    birthday: "1992-01-12",
    gender: "女",
    forbidden: false,
  },
  {
    date: "2016-05-01",
    name: "王佳丽",
    phone: "13523111543",
    role: "管理员",
    birthday: "1992-01-12",
    gender: "女",
    forbidden: false,
  },
  {
    date: "2016-05-03",
    name: "沙马猛",
    phone: "13523111543",
    role: "管理员",
    birthday: "1992-01-12",
    gender: "男",
    forbidden: true,
  },
]);

const form = reactive({
  name: "",
  phone: "",
  birthday: "",
  gender: "",
  forbidden: false,
  role: "",
});

const dialogVisible = ref(false);
const formData = reactive({
  name: '',
  phone: '',
  birthday: '',
  gender: '',
  forbidden: false,
  role: '',
  date: ''
});

const addDialog = () => {
  formData.name = '';
  formData.phone = '';
  formData.birthday = '';
  formData.gender = '';
  formData.forbidden = false;
  formData.role = '';
  formData.date = '';
  dialogVisible.value = true;
};

const editRow = (index: number) => {
  const selectedRow = tableData.value[index];
  formData.name = selectedRow.name;
  formData.phone = selectedRow.phone;
  formData.birthday = selectedRow.birthday;
  formData.gender = selectedRow.gender;
  formData.forbidden = selectedRow.forbidden;
  formData.role = selectedRow.role;
  formData.date = selectedRow.date;
  dialogVisible.value = true;
};

const deleteRow = (index: number) => {
  tableData.value.splice(index, 1);
};

const handleSave = (newData: any) => {
  const index = tableData.value.findIndex((row) => row.date === newData.date);
  if (index !== -1) {
    tableData.value[index] = { ...newData };
  } else {
    tableData.value.push({ ...newData });
  }
  dialogVisible.value = false;
};

const formatter = (row: any, column: any) => {
  return row.phone;
};
</script>